<!-- 新办会员卡续费 -->
<template>
  <div>
    <el-row>
      <el-col :span="24">
        <el-steps :active="step"
                  finish-status="success"
                  simple
                  class="el-steps">
          <el-step title="基本信息"
                   description="会员基础资料"
                   icon="el-icon-edit"></el-step>
          <el-step title="会员卡信息"
                   description="会员卡相关的信息"
                   icon="el-icon-bank-card"></el-step>
          <el-step title="保存完成"
                   description="success"
                   icon="el-icon-picture"></el-step>
        </el-steps>
      </el-col>
      <el-col :span="24"
              v-show="step == 0">
        <el-card class="box-card">
          <!-- <img :src="imageUrl"> -->
          <create-member v-on:setStepVal="setStepVal"></create-member>
        </el-card>
      </el-col>
      <!-- 会员卡信息录入部分 -->
      <el-col :span="24"
              v-show="step == 1">
        <el-card class="box-card">
          <create-card :memberId="1"
                       v-on:setStepVal="setStepVal"></create-card>
        </el-card>
      </el-col>
      <el-col :span="24"
              v-show="step == 2">
        <el-card class="box-card"
                 style="margin:20px auto; text-align: center">
          <h1>会员卡办理成功</h1>
          <el-button type="primary"
                     @click="step=0">继续办理</el-button>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
// https://github.com/happyiu/id-validator-modify#readme

import createCard from '@/components/card/create'
import createMember from '@/components/member/create'

export default {
  // import引入的组件需要注入到对象中才能使用
  components: {
    createCard,
    createMember
  },
  data () {
    // 这里存放数据
    return {
      step: 0,
      imageUrl: 'http://localhost:7000/upload/1601216867207.jpeg'
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    setStepVal (val) {
      this.step = val
    },
    test () {
      // var url = 'http://localhost:88/api/member/upload/20200928/1601275354326.png'
      // var spl = url.split('/')
      // var fname = spl[spl.length - 2] + '/' + spl[spl.length - 1]
      // console.log(fname)
      // console.log(sessionStorage.getItem('permissions'))
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {
    this.test()
    // console.log(this.$store.state.user.name)
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () { },
  beforeCreate () { }, // 生命周期 - 创建之前
  beforeMount () { }, // 生命周期 - 挂载之前
  beforeUpdate () { }, // 生命周期 - 更新之前
  updated () { }, // 生命周期 - 更新之后
  beforeDestroy () { }, // 生命周期 - 销毁之前
  destroyed () { }, // 生命周期 - 销毁完成
  activated () { } // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style scoped>
.el-steps {
  margin-top: 0;
}
.box-card {
  width: 968px;
  margin: 20px auto;
}
</style>
<!--
会员注册流程
1. 填写会员基础资料
  1.1 校验身份证号码是否已被注册
    1.1.1 如果已被注册，进去会员资料管理列表进行核对
  1.2 校验手机号码是否已被注册
2. 填写会员卡信息
  2.1 选择会员基础资料
  2.2 注册会员卡
3. 完成



1. 填写身份证号
  1.1 校验身份证是否已被注册
2. 填写手机号码
  2.1 校验手机号码是否已被注册

-->